<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else>
		<x-scroll :fixed="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
			<view class="list ">
				<view class="item wap" v-if="Array.isArray(list) && list.length > 0" v-for="item in list" :key="item.ID">
					<view class="cover" @click="previewImage(item.UserImgs)">
						<image :src="item.HeadImgUrl" mode="aspectFill" />
					</view>
					<view class="con" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
						<view class="name f1 c1">
							{{item.Name || "匿名"}}
							<view class="member member_he" v-if="getUserType(item.UserType) == 1 ">年卡</view>
							<view class="member number_huan" v-if="getUserType(item.UserType) == 2">金卡</view>
							<view class="member number_yin" v-if="getUserType(item.UserType) == 3">银卡</view>
						</view>
						<view class="time f2 c3">{{getOolineTime(item.UpdateTime)}}在线</view>
					</view>
					<view class="btn_sm" @click="toInvite(item)">发邀请</view>
				</view>
				<block v-else>
					<u-empty mode="list" width="64" height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
						text="暂无好友"></u-empty>
				</block>
			</view>
			
		</x-scroll>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				ballID:0,
				load: false,
				_freshing: true,
				newNum: 0,
				list: []
			}
		},
		onLoad(e) {
			// this.init();
			this.ballID=e.id;
			
			this.init();
			
			this.load=true;
		},
		onShow() {
			
		},
		methods: {
			onRefresh() {
				console.log('111');
				this.init();
			},
			async init() {
				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'ball_invite_people',
					Platform:uni.getStorageSync('platform')
				});
				
				// let res = await this.$api.post('/Friend/MyFriends');
				// this.list = res.data.filter(item => {
				// 	return item.UserID != uni.getStorageSync('user').UserID;
				// })
				
				// console.log(JSON.stringify(this.list));
	
			},
			async toInvite(item) {
				console.log(JSON.stringify(item));
				
				let res = await this.$api.post('/Appointment/Invited',{ID:this.ballID,UserID:item.UserID});
				console.log(JSON.stringify(res.data));
				if(res.data){
					
					this.$pv.msg('邀请成功，等等对方确认...');
				}
				else
					this.$pv.msg(res.data.message);
			}
		},
		computed: {

			getUserType(l) {
				return l => {
					if (l.indexOf('年') != -1) {
						return 1
					} else if (l.indexOf('金') != -1) {
						return 2
					} else if (l.indexOf('银') != -1) {
						return 3
					} else {
						return 0
					}
				}
			},
			getOolineTime(time) {
				return time => {
					let d = new Date(time).valueOf();
					return uni.$u.timeFrom(d);
				}
			}
		}
	}
</script>

<style lang="scss">
	.list {
		.item {
			display: flex;
			height: 140rpx;
			align-items: center;

			.cover {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 1px solid #333;

				image {

					height: 100%;
					width: 100%;
				}
			}

			.con {
				padding-left: 20rpx;
				flex: 1;
				.name{
					color: #333;
				}
				.time {
					margin-top: 10rpx;
				}
			}

			.btn_sm {
				width: 112rpx;
				height: 48rpx;
				border-radius: 8rpx;
				line-height: 48rpx;
				text-align: center;
				background: #ffaa00;
				color: #fff;
			}

			.member {
				display: inline-block;
				vertical-align: middle;
				width: 68rpx;
				height: 32rpx;
				background: linear-gradient(135deg, #7E7E7E 0%, #292929 100%);
				border-radius: 2px;
				border: 2px solid #D6C6AB;
				text-align: center;
				color: #fff;
				font-size: 16rpx;
				line-height: 32rpx;
				margin-left: 20rpx;
			}

			.number_huan {
				color: #4C310C;
				background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
				border: 2rpx solid #E6CEB5;
			}

			.number_yin {
				color: #4C310C;
				background: linear-gradient(180deg, #c9daf8 0%, #E1C4A6 100%);
				border: 2rpx solid #E6CEB5;
			}


		}

		.add {

			//  background: linear-gradient(90deg, #212121 0%, #313131 100%);
			.cover {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					height: 70%;
					width: 70%;
				}
			}

			.nums {
				height: 45rpx;
				width: 45rpx;
				border-radius: 50%;
				background: #f00;
				color: #fff;
				text-align: center;
				line-height: 40rpx;
			}
		}
	}
</style>